<template>
  <progess-chart
    style="height:400px"
    :options="{
      title: [
        {
          text: '直播访问',
          show: true,
          left: '15%',
          bottom: 80,
        },
        {
          text: '直播访问',
          show: true,
          left: '65%',
          bottom: 80,
        },
      ],
      legend: {
        show: false,
      },
      tooltip: {
        show: false,
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          startAngle: 180, //起始角度
          avoidLabelOverlap: false,
          labelLine: {
            show: false,
          },
          data: [
            { value: 25, name: '2' },
            {
              value: 55,
              name: '',
              itemStyle: {
                emphasis: {
                  color: '#e6e9f0',
                },
                normal: {
                  color: '#e6e9f0',
                },
              },
            },
          ],
        },
        {
          name: '访问来源',
          type: 'pie',
          startAngle: 180, //起始角度
          avoidLabelOverlap: false,
          labelLine: {
            show: false,
          },
          center: ['75%', '50%'],
          data: [
            { value: 45, name: '2' },
            {
              value: 55,
              name: '',
              itemStyle: {
                emphasis: {
                  color: '#e6e9f0',
                },
                normal: {
                  color: '#e6e9f0',
                },
              },
            },
          ],
        },
      ],
    }"
  />
</template>

<script>
import {
  BarChart,
  LineChart,
  AreaChart,
  PieChart,
  MapChart,
  registerMap,
  ProgessChart,
} from '../components'

export default {
  name: 'HelloWorld',
  components: {
    BarChart,
    AreaChart,
    LineChart,
    PieChart,
    MapChart,
    ProgessChart,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      loading: false,
      loadingOptions: {
        color: 'green',
      },

      series: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    }
  },
  methods: {
    handleClick(item) {
      alert(item)
    },
  },

  created() {
    // this.loading = true
    // setTimeout(() => {
    //   this.options = {
    //     series: [
    //       {
    //         data: [
    //           {
    //             name: '示意13',
    //             value: 200,
    //           },
    //           {
    //             name: '示意24',
    //             value: 600,
    //           },
    //         ],
    //       },
    //     ],
    //   }
    // }, 3000)
    // this.$refs.chart.getEchartsInstance().showLoading({ color: 'green' })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  height: 90px;
  border: 1px solid red;
  margin-top: 10px;
}
a {
  color: #42b983;
}
.button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
</style>
